function createTemplate(img, name) {
		$(getHeader()).prependTo("body");
		$("#body").addClass("row");
		$(getSideBar(img, name)).prependTo("#body");
		$("html").append(getFooter());
		autoComplete();
};

function getFooter(){
	var html = "<footer class='row'><div class='large-12 columns'><hr /><div class='row'><div class='large-5 columns'><p>podemos poner un pie de pagina</p></div></div></div></footer>";
	return html;
}
function getHeader(){
	var html = "<div class='row'><div class='large-12 columns'><div class='panel ui-corner-all'><h1>WeAreTwitter</h1><input id='search' class='ui-corner-all search' /></div></div></div>";
	return html;
}
function getSideBar(img, name){
	var html = "";
	var url = "'profile.html?name="+name+"'";
	html += 		"<div class='large-3 columns'>";
	html +=				"<div class='panel ui-corner-all'>";
	html +=					"<a href="+url+"><img src='"+img+"'/></a>";
	html +=					"<h5><a href="+url+">"+name+"</a></h5>";
	html +=					"<div class='section-container vertical-nav ui-corner-all' data-section data-options='deep_linking: false;one_up:true'>";
	html +=						"<section class='section'><h5 class='title'><a href='home.html?"+name+"'>Tweets</a></h5></section>";
	html +=						"<section class='section'><h5 class='title'><a href='folowing.html?"+name+"'>Siguiendo</a></h5></section>";
	html +=						"<section class='section'><h5 class='title'><a href=javascript:void(0);>Seguidores</a></h5></section>";
	html +=					 "</div>";
	html +=				"</div>";
	html +=        "</div>";
	return html;
}
function autoComplete(){
	var search = $( "#search" );
	search.val("Buscar");
	search.focus(function(){
		if(search.val()=="Buscar"){
			search.val("");
		}
	});
	search.blur(function(){
		if(search.val()==""){
			search.val("Buscar");
		}
	});
	search.autocomplete({
		source: function( request, response ) {
		$( this ).removeClass( "search" ).addClass( "ui-autocomplete-loading" );
		$.ajax({
		  url: "http://www.aromasynaturaleza.com/nombres.php",
		  data: {
			nameStartsWith: request.term
		  },
		  success: function( data ) {
		  data = jQuery.parseJSON(data);
			response( $.map( data.names, function( item ) {
			  return {
				label: item.name,
				value: item.name
			  }
			}));
			$( this ).removeClass( "ui-autocomplete-loading" ).addClass( "search" );
		  }
		});
		},
		minLength: 2,
		select: function( event, ui ) {
			window.location="profile.html?q="+ui.item.value;
		},
		open: function() {
		//  $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
		//$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});
}